import {onBeforeMount, reactive, computed} from 'vue';
import {useRouter} from 'vue-router';
import {useStore} from 'vuex';
import player from "../player";
import './index.scss'

const Home = ({
    name: 'Home',
    setup(props) {
        const router = useRouter();
        const store = useStore();
        const state = reactive({
            list: [],
            tabBarIndex: 0,
            extendShow: false,
        });
        // 首页头部状态
        const headerClose = computed(() => {
            return store.state.proHeaderClose
        });
        // tabBar
        const tabBarMock = [{
            id: 0,
            title: '推荐',
            path: '/recommend'
        },
            {
                id: 1,
                title: '歌手',
                path: '/singer'
            },
            {
                id: 2,
                title: '排行',

            },
        ];
        // tabBar跳页面
        const handleWhichPath = () => {
            switch (state.tabBarIndex) {
                case 0:
                    router.push('/recommend');
                    break;
                case 1:
                    router.push('/singers');
                    break;
                case 2:
                    router.push('/rank');
                    break;
                default:
                    break;
            }
        };
        // tabBar切换
        const handleTabClick = (id) => {
            state.tabBarIndex = id;
            handleWhichPath();
        };
        onBeforeMount(() => {
            handleWhichPath();
        });

        const renderNavRight = <van-icon name="search" size="18" color="#fff" onClick={() => router.push('/search')}/>;
        const renderNavLeft = <van-icon name="wap-nav" dot size="18" color="#fff" onClick={() => state.extendShow = true}/>;
        const renderTabBar = () => {
            return (
                <div className="tabBar">
                    {
                        tabBarMock.map(item => {
                            return (
                                <div key={item.id} onClick={() => handleTabClick(item.id)}>
                                    <span className={state.tabBarIndex === item.id ? 'tabBarIndex' : ''}>
                                        {item.title}
                                    </span>
                                </div>
                            )
                        })
                    }
                </div>
            )
        };
        const renderProHeader = () => {
            return !headerClose.value ?
                <div className="proHeader">
                    <van-nav-bar
                        title="Pro"
                        v-slots={{
                            'right': () => renderNavRight,
                            'left': () => renderNavLeft
                        }}
                    />
                    {
                        renderTabBar()
                    }
                </div>
                : null;
        };
        return () => (
            <div className="viewBox homePage">
                {renderProHeader()}
                <div className="wrapBox">
                    <router-view/>
                </div>
                <van-popup position={'left'} style={{height: '100%', width: '70%'}}
                           v-model={[state.extendShow, "show"]}>
                    <div>123</div>
                </van-popup>
                <player/>
            </div>
        )
    },
});
export default Home